<template>
  <div class="catalog-detail-view">
    <!-- 背景层 - 与Panel组件结构一致 -->
    <div class="fp-bg darker">
      <div class="fb_bg_in"></div>
    </div>
    
    <!-- 内容层 -->
    <div class="content">
      <div class="section-container">
        <div class="content_sides">
        <!-- 左侧：面包屑和标题 -->
        <div class="content_side content_side__left">
          <div class="main_title_wrapper">
            <div class="main_subtitle">
              <ul class="breadcrumbs">
                <li class="home">
                  <router-link to="/" class="home">主页</router-link>
                </li>
                <li>
                  <a href="/#catalog" @click.prevent="goToCatalog">目录</a>
                </li>
                <li class="current-item">
                  <span>{{ categoryData?.title }}</span>
                </li>
              </ul>
            </div>
            <h1 class="main_title">{{ categoryData?.title }}</h1>
            <div class="title_description"></div>
          </div>
        </div>
        
        <!-- 右侧：子产品卡片 -->
        <div class="content_side content_side__right">
          <div class="sub_catalog_blocks">
            <!-- 实际产品 -->
            <div 
              v-for="product in categoryData?.products" 
              :key="product.id"
              class="sub_catalog_block not_empty"
              @click="handleProductClick(product.link)"
            >
              <div class="corner top_right"></div>
              <div class="corner top_left"></div>
              <div class="corner bottom_right"></div>
              <div class="corner bottom_left"></div>
              <div class="about_block__num">{{ product.id }}</div>
              <div class="sub_catalog_block__ico">
                <img v-if="product.image" :alt="product.title" :src="product.image">
                <span>{{ product.title }}</span>
              </div>
              <div class="sub_catalog_block__hover">
                <div class="sub_catalog_block__hover_in">
                  <div class="pb_hover_text">
                    {{ product.title }}
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 占位卡片 -->
            <div 
              v-for="i in placeholderCount" 
              :key="`placeholder-${i}`"
              class="sub_catalog_block"
            >
              <div class="corner top_right"></div>
              <div class="corner top_left"></div>
              <div class="corner bottom_right"></div>
              <div class="corner bottom_left"></div>
              <img alt="img" src="@/assets/images/category/zaglushka.svg">
            </div>
          </div>
        </div>
        </div>
        
        <!-- 产品描述文本 -->
        <div v-if="categoryData?.description" class="page-category_text_desc" v-html="categoryData.description"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 导入产品图片
import productImage1 from '@/assets/images/details/unnamed.jpg?url';
import productImage2 from '@/assets/images/details/711_original-1.jpg?url';

interface Product {
  id: string;
  title: string;
  image?: string;
  link?: string;
}

interface CategoryData {
  id: string;
  title: string;
  products: Product[];
  description: string;
}

const route = useRoute();
const router = useRouter();
const categoryId = computed(() => route.params.id as string);

// 目录数据
const catalogData: Record<string, CategoryData> = {
  '01': {
    id: '01',
    title: '不锈钢管道',
    products: [
      {
        id: '01',
        title: '圆形不锈钢电焊管',
        image: productImage1,
        link: '/catalog/01/01'
      },
      {
        id: '02',
        title: '型材电焊管',
        image: productImage2,
        link: '#'
      }
    ],
    description: `
      <p>在工业金属轧制领域，不锈钢管道是应用广泛的产品。产品系列以长度、恒定截面、壁厚和表面类型为特征。不锈钢是铁与碳及其他化学元素（铬、镍、锰、钨、钼）的合金。金属的特性表现为对外部环境因素和腐蚀的抗性。不锈钢型材管在汽车、燃料、食品、化工、仪器制造、家具、市政和农业领域有广泛应用。</p>

      <h2>不锈钢管道：特点和优势</h2>
      <p>产品系列在尺寸、表面和生产技术方面有所不同。主要的制造方法是无缝和焊缝。任何方法都基于GOST标准的技术要求：EN 10217-7、GOST 10498、GOST 24030、GOST 9941-81、TU 14-4-489-76、TU 14-3-1318-85等。不锈钢管道的优势包括：</p>
      <ul>
        <li>抗氧化、抗腐蚀和机械损伤</li>
        <li>可在高压条件下使用</li>
        <li>对碱和酸的负面影响具有惰性</li>
        <li>装饰特性</li>
        <li>强度和耐用性</li>
        <li>产品重量相对较轻</li>
        <li>泄漏风险最小</li>
        <li>使用寿命长</li>
      </ul>

      <h2>不锈钢管道的分类特点</h2>
      <p>分类系统基于几个关键特征。它们决定了产品的质量、应用范围和用途。每个单元都带有标记，标明合金成分和特性。</p>

      <h3><strong>加工类型</strong></h3>
      <p>不锈钢管（如AISI 304）可以是哑光、磨砂或抛光（镜面）的。效果通过化学、热处理或机械加工实现。</p>

      <h3><strong>钢材牌号</strong></h3>
      <p>生产中使用的钢材类型（12х18н10т、AISI 304、AISI 304L、AISI 316L、AISI 316Ti）由标准要求确定。AISI 316标记的钢材具有抗腐蚀性能、高强度、耐热性和可塑性。其成分包括钼、铬和镍。AISI 304标记的钢材对各种环境具有抗性。12х18Н10Т是最受欢迎的耐腐蚀钢材之一，具有机械强度、耐热性，易于进行额外的机械加工。</p>

      <h3><strong>截面形状和厚度</strong></h3>
      <p>标准管道截面为圆形。生产能力也提供其他选择，可以是矩形或方形。不锈钢管道可购买各种壁厚（从1.0-2.0mm到4.0-6.0mm），价格实惠。</p>

      <h3><strong>应用领域</strong></h3>
      <p>不锈钢具有出色的操作性能。因此，12х18Н10Т钢制无缝管、AISI 304和AISI 316电焊管及其他类型的产品有广泛的应用范围，包括：</p>
      <ul>
        <li>供暖、供水和污水管道系统</li>
        <li>能源、化工、造船、食品行业</li>
        <li>医疗设备生产</li>
        <li>建筑装饰元素生产等</li>
      </ul>

      <p>我们公司提供在明斯克购买不锈钢（奥氏体、铁素体）产品。根据表面类型、尺寸和壁厚提供广泛的产品选择。产品系列包括AISI 304、AISI 316L等不锈钢管道。请浏览我们的产品系列，通过电话或网站下订单。</p>
    `
  }
};

const categoryData = ref<CategoryData | null>(null);

// 占位卡片数量（确保总共3个卡片，只显示一行）
const placeholderCount = computed(() => {
  if (!categoryData.value) return 0;
  const productCount = categoryData.value.products.length;
  return Math.max(0, 3 - productCount);
});

onMounted(() => {
  // 允许页面滚动
  document.body.style.overflow = 'auto';
  document.documentElement.style.overflow = 'auto';
  
  // 禁用主页的 Observer（避免阻止详情页的滚轮事件）
  if ((window as any).panelObserver) {
    (window as any).panelObserver.kill?.();
    (window as any).panelObserver = null;
  }
  
  const data = catalogData[categoryId.value];
  if (data) {
    categoryData.value = data;
  } else {
    // 如果找不到数据，返回首页
    router.push('/');
  }
});

onUnmounted(() => {
  // 恢复主页的滚动设置
  document.body.style.overflow = 'hidden';
  document.documentElement.style.overflow = 'hidden';
  
  // Observer 会在 PanelManager 重新挂载时重新创建，这里不需要处理
});

const goToCatalog = () => {
  router.push('/');
  // 等待路由跳转完成后滚动到目录section
  setTimeout(() => {
    if (window.scrollToSection) {
      window.scrollToSection('catalog');
    }
  }, 100);
};

const handleProductClick = (link?: string) => {
  if (!link || link === '#') return;
  
  // 如果是内部路由，使用router.push
  if (link.startsWith('/')) {
    router.push(link);
  } else {
    // 如果是外部链接，在新标签页打开
    window.open(link, '_blank');
  }
};
</script>

<style scoped>
.catalog-detail-view {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* 背景层 - 与Panel组件一致 */
.fp-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

/* 通用径向渐变遮罩 */
.fp-bg:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: radial-gradient(ellipse at 70% center, rgba(27, 33, 45, 0.7) 0, rgba(27, 33, 45, 0.9) 30%, #1b212d 50%, #1b212d 100%);
  z-index: 1;
}

.fb_bg_in {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/backgrounds/bg_about.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 0;
}

/* darker类的深色遮罩层 */
.fp-bg.darker .fb_bg_in::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(17, 23, 36, 0.7);
  z-index: 1;
}

/* 内容层 */
.content {
  width: 100%;
  position: relative;
  z-index: 2;
}

/* section容器 - 与其他页面保持一致 */
.section-container {
  width: 150rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 3rem 80px;
  max-width: 1920px;
  margin: 0 auto;
}

.content_sides {
  width: 100%;
  max-width: 150rem;
  margin: 0 auto 60px;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}

.content_side__left {
  flex: 0 0 auto;
  width: 400px;
  padding-right: 3rem;
}

.content_side__right {
  flex: 1;
  min-width: 0;
}

.main_title_wrapper {
  margin-bottom: 4rem;
}

/* 面包屑 */
.breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  color: #e58707;
  flex-wrap: wrap;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
  content: '>';
  margin-left: 8px;
  color: #e58707;
}

.breadcrumbs a {
  color: #e58707;
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumbs a:hover {
  color: #ff9800;
}

.breadcrumbs .current-item span {
  color: #e58707;
}

/* 标题 */
.main_subtitle {
  font-size: 1.8rem;
  color: #e58707;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.main_title {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #fff;
}

/* 子目录卡片网格 */
.sub_catalog_blocks {
  display: flex;
  flex-wrap: wrap;
  margin: -2px;
}

.sub_catalog_block {
  width: 24rem;
  height: 24rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 2px;
  padding: 5px;
  transition: all 0.3s ease-in-out;
}

.sub_catalog_block.not_empty {
  cursor: pointer;
}

.sub_catalog_block:hover .corner {
  opacity: 0;
}

.sub_catalog_block:hover .sub_catalog_block__hover {
  opacity: 1;
  top: 50%;
}

.sub_catalog_block:hover .sub_catalog_block__hover:before {
  width: 100%;
}

/* 四个角的装饰边框 */
.corner {
  position: absolute;
  width: 3rem;
  height: 3rem;
  transition: all 0.3s ease-in-out;
}

.corner.top_right {
  top: 0;
  right: 0;
  border-right: 1px solid #e58707;
  border-top: 1px solid #e58707;
}

.corner.top_left {
  top: 0;
  left: 0;
  border-left: 1px solid #e58707;
  border-top: 1px solid #e58707;
}

.corner.bottom_right {
  bottom: 0;
  right: 0;
  border-right: 1px solid #e58707;
  border-bottom: 1px solid #e58707;
}

.corner.bottom_left {
  left: 0;
  bottom: 0;
  border-left: 1px solid #e58707;
  border-bottom: 1px solid #e58707;
}

/* 编号 */
.about_block__num {
  background-color: #e58707;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 3rem;
  height: 3rem;
  left: 5px;
  top: 5px;
  font-size: 1.4rem;
  color: #fff;
  font-weight: 600;
  z-index: 99;
}

/* 图标和标题 */
.sub_catalog_block__ico {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 0;
}

.sub_catalog_block__ico img {
  width: 100%;
  flex: 1;
  display: block;
  object-fit: cover;
}

.sub_catalog_block__ico > span {
  color: #000;
  text-align: center;
  padding: 15px 20px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.4;
  background: #fff;
  width: 100%;
}

.sub_catalog_block__ico a {
  color: #000;
  text-decoration: none;
  transition: color 0.3s;
}

.sub_catalog_block__ico a:hover {
  color: #e58707;
}

/* 占位卡片图片 */
.sub_catalog_block > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.3;
}

/* 悬停层 */
.sub_catalog_block__hover {
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(-50%);
  width: 99%;
  height: 99%;
  display: table;
  background-color: #232b39;
  box-shadow: 0 4rem 8rem rgba(17, 23, 36, 0.6);
  transition: 0.7s;
  opacity: 0;
  padding: 2rem;
}

.sub_catalog_block__hover:before {
  content: '';
  display: block;
  width: 0;
  height: 0.3rem;
  background: #e58707;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  transition: 1.2s;
}

.sub_catalog_block__hover_in {
  display: table-cell;
  vertical-align: middle;
}

.pb_hover_text {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.5;
}

.pb_hover_text a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.3s;
}

.pb_hover_text a:hover {
  color: #e58707;
}

/* 产品描述文本 */
.page-category_text_desc {
  max-width: 100%;
  max-height: 150px;
  margin: 50px auto 0;
  padding: 0 10px 0 0;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #909bb0;
  overflow-y: auto;
}

/* 自定义滚动条样式 - 参考原网站 */
.page-category_text_desc::-webkit-scrollbar {
  width: 24px;
  height: 8px;
  background-color: #143861;
  cursor: pointer;
}

/* 滚动条滑块 */
.page-category_text_desc::-webkit-scrollbar-thumb {
  background-color: #e58707;
  box-shadow: inset 1px 1px 10px #f3faf7;
  cursor: pointer;
}

.page-category_text_desc::-webkit-scrollbar-thumb:hover {
  background-color: #e58707;
  cursor: pointer;
}

/* 向上箭头按钮 */
.page-category_text_desc::-webkit-scrollbar-button:vertical:start:decrement {
  background: linear-gradient(120deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
    linear-gradient(240deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
    linear-gradient(0deg, #02141a 30%, rgba(0, 0, 0, 0) 31%);
  background-color: #f6f8f4;
  cursor: pointer;
}

/* 向下箭头按钮 */
.page-category_text_desc::-webkit-scrollbar-button:vertical:end:increment {
  background: linear-gradient(300deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
    linear-gradient(60deg, #02141a 40%, rgba(0, 0, 0, 0) 41%),
    linear-gradient(180deg, #02141a 30%, rgba(0, 0, 0, 0) 31%);
  background-color: #f6f8f4;
  cursor: pointer;
}

.page-category_text_desc :deep(h2) {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  margin: 40px 0 20px;
}

.page-category_text_desc :deep(h3) {
  font-size: 2.2rem;
  font-weight: 600;
  color: #fff;
  margin: 30px 0 15px;
}

.page-category_text_desc :deep(p) {
  margin-bottom: 20px;
}

.page-category_text_desc :deep(ul) {
  margin: 20px 0;
  padding-left: 30px;
}

.page-category_text_desc :deep(li) {
  margin-bottom: 10px;
  position: relative;
  padding-left: 10px;
}

.page-category_text_desc :deep(li::marker) {
  color: #e58707;
}

.page-category_text_desc :deep(a) {
  color: #e58707;
  text-decoration: none;
}

.page-category_text_desc :deep(a:hover) {
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .section-container {
    padding: 100px 3rem 60px;
  }

  .content_sides {
    gap: 40px;
  }

  .content_side__left {
    width: 300px;
  }

  .main_title {
    font-size: 3.6rem;
  }

  .sub_catalog_block {
    height: 20rem;
  }
}

@media (max-width: 900px) {
  .section-container {
    padding: 90px 3rem 60px;
  }

  .content_sides {
    flex-direction: column;
    gap: 30px;
  }

  .content_side__left {
    width: 100%;
  }

  .main_title {
    font-size: 3.2rem;
  }

  .sub_catalog_block {
    width: calc(50% - 4px);
    height: 18rem;
  }

  .sub_catalog_block__ico > span {
    font-size: 1.4rem;
    padding: 10px 15px;
  }
}

@media (max-width: 600px) {
  .section-container {
    padding: 80px 3rem 60px;
  }

  .breadcrumbs {
    font-size: 1.2rem;
  }

  .main_title {
    font-size: 2.8rem;
  }

  .sub_catalog_block {
    height: 16rem;
  }

  .page-category_text_desc {
    font-size: 1.4rem;
    padding: 0 10px 0 0;
  }

  .page-category_text_desc :deep(h2) {
    font-size: 2.4rem;
  }

  .page-category_text_desc :deep(h3) {
    font-size: 2rem;
  }
}

@media (max-width: 400px) {
  .sub_catalog_block {
    width: 100%;
  }
}
</style>

